<template>
  <view class="component">
      <template v-if="type === 'box'">
        <view class="number-box-view">
          <up-number-box
            button-size="64rpx"
            inputWidth
            color="#ffffff"
            bgColor="#2979ff"
            iconStyle="color: #fff"
          ></up-number-box>
        </view>
      </template>

      <template v-if="type === 'icon'">

        <up-number-box v-model="_value">
          <template #minus>
            <view class="minus">
              <view class="icon iconfont icon-a-44_44_minus"></view>
            </view>
          </template>
          <template #input>
            <text
              style="width: 50px;text-align: center;"
              class="input"
              >{{_value}}</text
            >
          </template>
          <template #plus>
            <view class="plus">
              <view class="icon iconfont icon-a-44_44_fill_add"></view>
            </view>
          </template>
        </up-number-box>
      </template>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: 0
  },
  type: {
    type: String, // 'box' | icon
    default: 'box'
  }
});

const emit = defineEmits(["update: modelValue"]);
const _value = ref(props.modelValue);

// const handleChange = () => {
  // emit('update: modelValue', _value.value++)
// }
const handleChange = (value, type) => {
      if (type === 'minus') {
        console.log('NumberBox 的值减少了');
      } else if (type === 'plus') {
        console.log('NumberBox 的值增加了');
      }
    }
// const _value = computed({
//   get() {
//     return props.value;
//   },
//   set(val) {
//     emit('update: modelValue', val)
//   }
// });
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.component {
  display: flex;
  .number {
    &-box-view {
      display: flex;
      border: 2rpx solid #E6E6E6;
    }
  }
  .icon {
    color: $primary-color;
  }
}
</style>
